<script lang="ts" setup>
    const form = ref<FormInterface[]>([
        {
            field: "id",
            component: "InputHidden",
            value: 1
        },
        {
            label: "名字",
            field: "name",
            component: "Input",
            value: "",
            rules: [
                {
                    required: true
                }
            ]
        },
        {
            label: "手机号",
            field: "mobile",
            component: "InputTel",
            value: "",
            rules: [
                {
                    ruleKey: "required|phone"
                },
                {
                    maxLength: 15
                }
            ]
        },
        {
            label: "年龄",
            field: "age",
            component: "InputNumber",
            customValidate: (value: any) =>
            {
                return new Promise((resolve, reject) =>
                {
                    setTimeout(() =>
                    {
                        if (value >= 120)
                        {
                            reject("老王八");
                        }
                        else
                        {
                            resolve();
                        }

                    }, 1000);
                });
            }
        },
        {
            label: "性别",
            field: "sex",
            component: "RadioGroup",
            value: 3,
            rules: [
                {
                    required: true
                },
                {
                    max: 2,
                    message: "谁准许你保密的"
                }
            ],
            componentProps: {
                options: [
                    {
                        label: "男",
                        id: 1,
                        value: "male"
                    },
                    {
                        label: "女",
                        id: 2,
                        value: "female"
                    },
                    {
                        label: "保密",
                        id: 3,
                        value: "female"
                    }
                ],
                valueTag: "id"
            }
        },
        {
            label: "爱好",
            field: "hobby",
            component: "CheckboxGroup",
            value: [1, 3],
            rules: [
                {
                    required: true
                }
            ],
            componentProps: {
                options: [
                    {
                        label: "吃饭",
                        id: 1,
                        value: "eat"
                    },
                    {
                        label: "睡觉",
                        id: 2,
                        value: "sleep"
                    },
                    {
                        label: "打豆豆",
                        id: 3,
                        value: "cry",
                        disabled: true
                    }
                ],
                valueTag: "id"
            },
            customValidate: (value: any) =>
            {
                return !value.includes(2) ? "你不睡觉吗？" : true;
            }
        },
        {
            label: "状态",
            field: "status",
            component: "Switch",
            value: true
        },
        {
            label: "宽度",
            field: "width",
            component: "Slider",
            componentProps: {
                showValue: true
            }
        },
        {
            label: "文本",
            field: "text",
            component: "Textarea",
            rules: [
                {
                    minLength: 3
                }
            ]
        }
    ]);

    const formRef = ref<any>(null);

    const onloadFormHandler = (argumentsList: Record<string, any>): void =>
    {
        console.info(argumentsList);
        console.info("TEST");
    };

    asyncFn(() =>
    {
        /*
        * ToDO
        * */

        formRef.value.setValue({
            name: "小明",
            mobile: "13540485918",
            age: 110,
            sex: 1,
            hobby: [1, 2, 3],
            text: "我是文本"
        });

    }, 2000);

    const submitHandler = (): void =>
    {
        formRef.value.validate().then((formValue: Record<string, any>) =>
        {
            console.info(formValue);
        });
    };

    const clearValidateHandler = (): void =>
    {
        formRef.value.clearValidate();
    };

    const resetHandler = (): void =>
    {
        formRef.value.reset().then((formValue: Record<string, any>) =>
        {
            console.info(formValue);
        });
    };

</script>

<template>
    <!-- 表单 -->
    <u-layout
        :enable-refresh="false"
        title="表单组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="基础功能" />
                <view class="block">
                    <view class="ui-block-control">
                        <u-form
                            ref="formRef"
                            :form="form"
                            placement="horizontal"
                            content-align="left"
                            validate-trigger="submit"
                            @onload="onloadFormHandler"
                        >
                            <template #custom>
                                <view>我是自定义组件插槽</view>
                            </template>
                        </u-form>
                    </view>

                    <view class="button">
                        <u-button
                            text="提交"
                            type="primary"
                            @click="submitHandler"
                        />
                    </view>

                    <view class="button">
                        <u-button
                            text="清除验证状态"
                            type="primary"
                            @click="clearValidateHandler"
                        />
                    </view>

                    <view class="button">
                        <u-button
                            text="重置"
                            type="error"
                            @click="resetHandler"
                        />
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //表单 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;

                .button
                {
                    margin-top: 20px;
                }
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>